<template>
  <div>
    <div>
      <div v-if="Cart.cartItems.length">
        <el-card>
          <div class="clearfix" slot="header" style="text-align: left">
            <span>
              <h2 class="el-icon-shopping-cart-2"> 购物车
              </h2>
            </span>
          </div>
          <el-table
            :data="Cart.cartItems"
            border
            style="width: 100%">
            <el-table-column
              prop="barcode"
              label="商品条码"
              width="250">
            </el-table-column>
            <el-table-column
              prop="name"
              label="商品名称"
              width="250">
            </el-table-column>
            <el-table-column
              label="商品价格"
              width="250">
              <template slot-scope="scope">
                {{ scope.row.price + ' 元' }}
              </template>
            </el-table-column>
            <el-table-column
              prop="quantity"
              label="商品数量"
              width="250">
              <template slot-scope="scope">
                {{ scope.row.quantity + ' ' + scope.row.unit }}
              </template>
            </el-table-column>
            <el-table-column
              label="商品总价">
              <template slot-scope="scope">
                {{ scope.row.totalPrice + ' 元' }}
              </template>
            </el-table-column>
          </el-table>
          <div>合计：{{ Cart.totalAmount + ' 元' }}</div>
        </el-card>
      </div>
    </div>
    <div>
      <el-card>
        <div style="text-align: left" class="clearfix" slot="header">
          <h2 class="el-icon-bank-card"> 扫码商品</h2>
        </div>
        <el-form :inline="true" :model="Order" class="demo-form-inline">
          <el-form-item label="请输入条码">
            <el-input v-model="Order.barcode" placeholder="商品条码"></el-input>
          </el-form-item>
          <el-form-item label="商品数量">
            <el-input v-model="Order.quantity" placeholder="商品数量"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addCart">加入</el-button>
            <el-button type="success" @click="addOrder">付款成功</el-button>
            <el-button type="danger" @click="clearCart">清空购物车</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>


import itemService from "../global/service/itemService";

export default {
  name: 'Order',
  data() {
    return {
      Order: {
        barcode: '',
        quantity: 1
      },
      Cart: {
        cartItems: [],
        totalAmount: 0,
      },
    }
  },
  created() {
    this.getCart()
  },
  methods: {
    addCart() {
      itemService.addCart({
        barcode: this.Order.barcode,
        quantity: this.Order.quantity,
      }).then(() => {
        this.getCart()
        console.log(this.Cart.cartItems)
        this.$message.success('添加成功!')
      })
    },
    async getCart() {
      await itemService.getCart().then((res) => {
        this.Cart = res
      })
    },
    clearCart() {
      itemService.clearCart().then(() => {
        this.getCart()
        this.Order.barcode = ''
        this.$message.success('购物车已清空')
      })
    },
    addOrder() {
      itemService.addOrder().then(() => {
        this.getCart()
        this.$message.success('付款成功')
      })
    }
  }
}
</script>
<style>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 480px;
}
</style>
